<template>
  <el-row>
    <el-col :span="5">
      <basic-container>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @select="handleSelect">
          <el-menu-item v-for="item in menuData" :index="item.dictKey" :key="item.dictKey">
            <i class="el-icon-star-off"/>
            <span slot="title">{{item.dictValue}}</span>
          </el-menu-item>
        </el-menu>
      </basic-container>
    </el-col>
    <el-col :span="19">
      <basic-container>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   ref="crud"
                   v-model="form"
                   :page.sync="page"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   :before-open="beforeOpen"
                   @row-del="rowDel"
                   @on-load="onLoad">
          <template slot="menuLeft">
            <el-button type="danger"
                       size="small"
                       icon="el-icon-delete"
                       plain
                       @click="handleDelete">删 除
            </el-button>
          </template>
          <!--    各种情况下的卡槽      -->
          <!--    1、取值范围      -->
          <template slot="valueRangeForm" slot-scope="scope">
            <el-row>
              <el-col :span="11">
                <el-input size="small" v-model="form.minValue">
                </el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;color: #606266">
                —
              </el-col>
              <el-col :span="11">
                <el-input size="small" v-model="form.maxValue">
                </el-input>
              </el-col>
            </el-row>
          </template>
          <!--    2、关联关系      -->
          <template slot="relationsForm" slot-scope="scope">
            <avue-crud :option="relationsOption" :data="relations" ref="relationsCrud"></avue-crud>
          </template>
          <!--    3、长度范围      -->
          <template slot="lengthRangeForm" slot-scope="scope">
            <el-row>
              <el-col :span="11">
                <el-input-number v-model="form.minLength" size="small" style="width: 100%" :controls="false"></el-input-number>
              </el-col>
              <el-col :span="2" style="text-align: center;color: #606266">
                —
              </el-col>
              <el-col :span="11">
                <el-input-number v-model="form.maxLength" size="small" style="width: 100%" :controls="false"></el-input-number>
              </el-col>
            </el-row>
          </template>
          <!--    4、字符串内容      -->
          <template slot="containForm" slot-scope="scope">
            <el-row>
              <el-col :span="11">
                <el-input size="small" v-model="form.containString">
                </el-input>
              </el-col>
              <el-col :span="9">
                <el-select v-model="form.charPosition">
                  <el-option v-for="item in charPositionDic"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <div v-if="form.charPosition=='specific'">
                  <el-input-number v-model="form.specificPosition" size="small" style="width: 100%" :controls="false"></el-input-number>
                </div>
              </el-col>
            </el-row>
          </template>
        </avue-crud>
      </basic-container>
    </el-col>
  </el-row>
</template>

<script>
    import {getDictionary} from '@/api/system/dictbiz'
    import {getRuleTemplate, pageList, removeRuleTemplates, removeRuleTemplate} from "@/api/data_quality/rule_template"

    export default {
        name: "index",
        data() {
            return {
                menuData: [],
                form: {},
                query: {},
                loading: true,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                selectionList: [],
                option: {
                    calcHeight: 30,
                    dialogWidth: 900,
                    labelWidth: 140,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: true,
                    viewBtn: true,
                    selection: true,
                    dialogClickModal: false,
                    saveBtn: false,
                    cancelBtn: false,
                    delBtn: true,
                    updateBtn: false,
                    indexLabel: '序号',
                    editBtn: false,
                    addBtn: false,
                    column: [
                        {
                            label: "规则代码",
                            prop: "code",
                        },
                        {
                            label: "主题表",
                            prop: "themeId",
                            dicUrl: "/api/data-quality/themeTable/getTitleIdList",
                            props: {
                                label: "title",
                                value: "id"
                            },
                            type: 'select'
                        },
                        {
                            label: "问题级别",
                            prop: "problemLevel",
                            type: 'select',
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=problem_level",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                            dataType: 'number'
                        },
                        {
                            label: "创建时间",
                            prop: "createTime",
                            display: false
                        },
                        {
                            label: "状态",
                            prop: "enableStatus",
                            type: 'radio',
                            value: 1,
                            dicData: [
                                {
                                    label: "启用",
                                    value: 1
                                },
                                {
                                    label: "禁用",
                                    value: 0
                                },

                            ],
                            hide: true
                        },
                        {
                            label: "联合不为空",
                            prop: "unionNotNull",
                            dicData: [
                                {
                                    label: '是',
                                    value: '1'
                                },
                                {
                                    label: '否',
                                    value: '0'
                                }
                            ],
                            type: 'radio',
                            props: {
                                label: 'label',
                                value: 'value'
                            },
                            hide: true,
                            display: false
                        },
                        {
                            label: "组合重复",
                            prop: "combineRepeat",
                            dicData: [
                                {
                                    label: '是',
                                    value: '1'
                                },
                                {
                                    label: '否',
                                    value: '0'
                                }
                            ],
                            type: 'radio',
                            props: {
                                label: 'label',
                                value: 'value'
                            },
                            hide: true,
                            display: false
                        },
                        {
                            label: "检查字段",
                            prop: "checkField",
                            type: 'select',
                            dicData: [],
                            multiple: false,
                            props: {
                                label: "name",
                                value: "name"
                            },
                            dataType: 'string',
                            hide: true,
                            display: false
                        },
                        {
                            label: "取值范围",
                            prop: "valueRange",
                            formslot: true,
                            hide: true,
                            display: false
                        },
                        {
                            label: "允许误差最大天数",
                            prop: "maxAllowableErrorDays",
                            type: 'number',
                            precision: 0,
                            minRows: 0,
                            hide: true,
                            display: false
                        },
                        {
                            label: "检查公式",
                            prop: "checkFormula",
                            span: 24,
                            hide: true,
                            display: false
                        },
                        {
                            label: "关联关系",
                            prop: "relations",
                            formslot: true,
                            span: 24,
                            hide: true,
                            display: false
                        },
                        {
                            label: "规范类型",
                            prop: "specificationType",
                            type: 'select',
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=specification_type",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                            dataType: 'string',
                            hide: true,
                            display: false,
                        },
                        {
                            label: "规范类型",
                            prop: "specificationSubtype",
                            type: 'select',
                            dicData: [],
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                            hide: true,
                            display: false,
                        },
                        {
                            label: "正则表达式",
                            prop: "regex",
                            span:24,
                            display: false,
                            hide: true,
                        },
                        {
                            label: "长度范围",
                            prop: "lengthRange",
                            // span:24,
                            display: false,
                            hide: true,
                        },
                        {
                            label: "字符串内容",
                            prop: "contain",
                            span:16,
                            display: false,
                            hide: true,
                        },
                        {
                            label: "引用方式",
                            prop: "referenceMode",
                            type: 'select',
                            dicData: [
                                {
                                    label: '字典值',
                                    value: '1'
                                },
                                {
                                    label: '表字段',
                                    value: '2'
                                },
                            ],
                            display: false,
                            hide: true,
                        },
                        {
                            label: "字典值",
                            prop: "dicBizId",
                            type: 'tree',
                            props: {
                                label: 'title',
                                value: 'id'
                            },
                            display: false,
                            dicUrl: '/api/blade-system/dict-biz/tree',
                            hide: true,
                        },
                        {
                            label: "表字段",
                            prop: "tableField",
                            span:24,
                            display: false,
                            hide: true,
                        },
                        {
                            label: "描述",
                            prop: "describe",
                            hide: true,
                            span: 24,
                            maxlength: 1000,
                            minRows: 3,
                            showWordLimit: true
                        },
                    ]
                },
                data: [],
                type: '',
                relationsOption: {
                    editBtn: false,
                    addBtn: false,
                    index: true,
                    header: false,
                    delBtn: false,
                    viewBtn: true,
                    indexLabel: '序号',
                    column: [
                        {
                            label: "关联表",
                            prop: "joinTableName",
                        },
                        {
                            label: "连接方式",
                            prop: "joinType",
                            type: 'select',
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=join_type",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                        },
                        {
                            label: "连接字段",
                            prop: "themeJoinFieldName",
                        },
                    ]
                },
                relations: [],
                charPositionDic: [
                    {
                        label: '任意位置',
                        value: 'any'
                    },
                    {
                        label: '开头',
                        value: 'prefix'
                    },
                    {
                        label: '结尾',
                        value: 'suffix'
                    },
                    {
                        label: '特定位置',
                        value: 'specific'
                    },
                ],
            }
        },
        computed: {
            ids() {
                let ids = [];
                this.selectionList.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            }
        },
        mounted() {
            getDictionary({code: 'rule_type'}).then(res => {
                this.menuData = res.data.data;
            })
        },
        methods: {
            beforeOpen(done, type) {
                let unionNotNull = this.findObject(this.option.column, "unionNotNull");
                let checkField = this.findObject(this.option.column, "checkField");
                let valueRange = this.findObject(this.option.column, "valueRange");
                let checkFormula = this.findObject(this.option.column, "checkFormula");
                let relations = this.findObject(this.option.column, "relations");
                let combineRepeat = this.findObject(this.option.column, "combineRepeat");
                let maxAllowableErrorDays = this.findObject(this.option.column, "maxAllowableErrorDays");
                let specificationType = this.findObject(this.option.column, "specificationType");
                let specificationSubtype = this.findObject(this.option.column, "specificationSubtype");
                let lengthRange = this.findObject(this.option.column, "lengthRange");
                let contain = this.findObject(this.option.column, "contain");
                let regex = this.findObject(this.option.column, "regex");
                let referenceMode = this.findObject(this.option.column, "referenceMode");
                let dicBizId = this.findObject(this.option.column, "dicBizId");
                let tableField = this.findObject(this.option.column, "tableField");
                specificationSubtype.display = false;
                lengthRange.display = false;
                contain.display = false;
                regex.display = false;
                checkField.multiple = false;
                unionNotNull.display = false;
                checkField.display = false;
                valueRange.display = false;
                checkFormula.display = false;
                relations.display = false;
                combineRepeat.display = false;
                maxAllowableErrorDays.display = false;
                specificationType.display = false;
                specificationSubtype.display = false;
                lengthRange.display = false;
                contain.display = false;
                regex.display = false;
                referenceMode.display = false;
                dicBizId.display = false;
                tableField.display = false;
                if (type == 'view') {
                    //判断类型并操作字段显示隐藏、单选或者多选
                    if (this.form.type == 'Null') {
                        unionNotNull.display = true;
                        checkField.display = true;
                        if (this.form.unionNotNull == '1') {
                            checkField.multiple = true;
                        } else {
                            checkField.multiple = false;
                        }
                    } else if (this.form.type == 'RANGE') {
                        //
                        checkField.display = true;
                        valueRange.display = true;
                    } else if (this.form.type == 'LOGIC') {
                        getRuleTemplate(this.form.id).then(res => {
                            this.relations = res.data.data.relations;
                            checkFormula.display = true;
                            relations.display = true;
                        })
                    } else if (this.form.type == 'REPEAT') {
                        combineRepeat.display = true;
                        checkField.display = true;
                        if (this.form.combineRepeat == '1') {
                            checkField.multiple = true;
                        } else {
                            checkField.multiple = false;
                        }
                    } else if (this.form.type == 'TIMELY') {
                        checkFormula.display = true;
                        maxAllowableErrorDays.display = true;
                    } else if (this.form.type == 'STANDARD') {
                        checkField.display = true;
                        specificationType.display = true;
                        let val = this.form.specificationType;
                        if (val == '7') {
                            specificationSubtype.display = true;
                            getDictionary({code: 'specification_type_date'}).then(res => {
                                specificationSubtype.dicData = res.data.data;
                            })
                        } else if (val == '8') {
                            specificationSubtype.display = true;
                            getDictionary({code: 'specification_type_time'}).then(res => {
                                specificationSubtype.dicData = res.data.data;
                            })
                        } else if (val == '9') {
                            specificationSubtype.display = true;
                            getDictionary({code: 'specification_type_datetime'}).then(res => {
                                specificationSubtype.dicData = res.data.data;
                            })
                        } else if (val == '15') {
                            lengthRange.display = true;
                        } else if (val == '16') {
                            contain.display = true;
                        } else if (val == '17') {
                            regex.display = true;
                        }
                    } else if (this.form.type == 'QUOTE') {
                        referenceMode.display = true;
                        if (this.form.referenceMode == '1') {
                            dicBizId.display = true;
                        } else if (this.form.referenceMode == '2') {
                            this.form.tableField = this.form.datasourceName + '库 ' + this.form.tableName + '表 ' + this.form.fieldName + '字段'
                            tableField.display = true;
                        }
                    }
                }
                done();
            },
            handleSelect(index) {
                this.query.type = index;
                this.page.currentPage = 1;
                this.onLoad(this.page);
            },
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return removeRuleTemplate(row.id);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });
            },
            handleDelete() {
                if (this.selectionList.length === 0) {
                    this.$message.warning("请选择至少一条数据");
                    return;
                }
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return removeRuleTemplates(this.ids);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                        this.$refs.crud.toggleSelection();
                    });
            },
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1;
                this.onLoad(this.page, params);
                done();
            },
            selectionChange(list) {
                this.selectionList = list;
            },
            selectionClear() {
                this.selectionList = [];
                this.$refs.crud.toggleSelection();
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page, this.query);
            },
            onLoad(page, params = {}) {
                this.loading = true;
                pageList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    const data = res.data.data;
                    this.page.total = data.total;
                    this.data = data.records;
                    this.loading = false;
                    this.selectionClear();
                });
            }
        },
    }
</script>

<style scoped>

</style>
